<template>
  <div id="statics">
    <!-- {{  data4 }} -->
    <div id="top">
      <div id="left1" style="width:70% ;height: 50px;border: 1px solid #f2f2f2;">
        <h3>待办审批事项：<span style="font-weight: 800;color: #0099ff;font-size: 25px;">62</span></h3>
        <h3>处理中审批事项：<span style="font-weight: 800;color: #33cc99;font-size: 25px;">62</span></h3>
        <h3>已处理审批事项：<span style="font-weight: 800;color: #ff3300;font-size: 25px;">6112</span></h3>
        <h3>已完结审批事项：<span style="font-weight: 800;color: #ff3300;font-size: 25px;">6552</span></h3>
      </div>
      <div id="right1"
        style="width: 28%;height: 50px; border: 1px solid #f2f2f2;display: flex;align-items: center;justify-content: space-around;">
        <select name="" id="" style="width: 90%;height: 60%;">
          <option value="">所有部门</option>
        </select>
      </div>
    </div>
    <div id="center">
      <div id="left2" style="position: relative;">
        <select name="" id=""
          style="position: absolute;top: 10px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div id="lefttop"
          style="width: 100%;height: 300px;border: 1px solid #f6f6f6;position: relative;    border-radius: 8px;">

        </div>
        <select name="" id=""
          style="position: absolute;top: 340px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div id="leftfoot"
          style="width: 100%;height: 300px;border: 1px solid #f6f6f6;margin-top: 30px;    border-radius: 8px;">

        </div>
      </div>
      <div id="center2" style="position: relative;">

        <div id="wordCloud"
          style="height: 200px; width: 100%;border: 1px solid #f6f6f6;    border-radius: 8px;overflow: hidden;">
        </div>
        <select name="" id=""
          style="position: absolute;top: 240px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div id="centerfoot"
          style="width: 100%;height: 400px;border: 1px solid #f6f6f6;margin-top: 30px;    border-radius: 8px;">

        </div>


      </div>
      <div id="right2" style="position: relative;">
        <select name="" id=""
          style="position: absolute;top: 10px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div
          style="width: 100%;height: 200px;border: 1px solid #f6f6f6;  border-radius: 8px;display: flex;position: relative;">
          <h3 style="position: absolute;left: 0px;top: -10px;">工作效果统计图</h3>
          <div id="righttop1" style="width: 50%;height: 200px;position: relative;    border-radius: 8px;">

          </div>
          <div id="righttop2" style="width: 50%;height: 200px;position: relative;    border-radius: 8px;">

          </div>

        </div>
        <select name="" id=""
          style="position: absolute;top: 225px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div id="rightcenter"
          style="width: 100%;height: 200px;border: 1px solid #f6f6f6;margin-top: 15px;    border-radius: 8px;">

        </div>
        <select name="" id=""
          style="position: absolute;top: 440px;right: 5px;background-color: #e6e6e6;z-index: 999;border: 0px;">
          <option value="">本周</option>
        </select>
        <div id="rightfoot"
          style="width: 100%;height: 200px;border: 1px solid #f6f6f6;margin-top: 15px;    border-radius: 8px;">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { toRaw } from '@vue/reactivity'
import { ref, reactive } from 'vue';
import { useStore } from "vuex";
import 'echarts-wordcloud';
import Axios from "@/router/ycyaxios/axiosinstance";
import {
  onMounted, onBeforeUnmount
} from "vue";
export default {
  name: 'ProblemStatistics',
  data() {
    return {
    };
  },
  setup() {
    const store = useStore();
    ///获取数据
    const data = ref('')
    const data4 = ref()

    store.commit("gettu", { page: 1 })
    //  setTimeout(() => {
    data.value = store.state.ycy.tplist

    const list = toRaw(store.state.ycy.tplist)
    // setTimeout(() => {
    // console.log(list[0].建设用地)
    //     data4.value=list[0].建设用地

    //  }, 1000);

    let dataall = reactive({});
    async function getsate() {
      dataall = await Axios({
        method: "post",
        url: "login/spselect",
        params: {

          endtime: 1,
          starttime: 1,

        }
      })
    }

    onMounted(() => {
      getsate().then(() => {
        // console.log(1111)
        console.log(dataall)
        const a=JSON.parse(dataall.data.data).建设用地
        // console.log(a)
        let myChart8 = echarts.init(document.getElementById("rightfoot"));
      document.getElementById('rightfoot').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart8.setOption({
        title: {
          text: '问题答复占比统计图',

        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: a,
                name: 'A'
              },
              {
                value: 234,
                name: 'B'
              },
              {
                value: 1548,
                name: 'C'
              }
            ],
            //   radius: ['40%', '70%']
          }

        ]
      });
      })
      // console.log(data4.value)
      document.getElementById('wordCloud').setAttribute('_echarts_instance_', '')
      var myChart = echarts.init(document.getElementById('wordCloud'));
      const option = {
        title: {
          text: '',
          x: "center"
        },
        backgroundColor: "#fff",
        // tooltip: {
        //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        // },
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 40],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ")"
                );
              }
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "100%",
            height: "100%",
            //数据
            data: [
              { value: '30', name: 'VIVO' },
              { value: '29', name: 'OPPO' },
              { value: '28', name: 'HONOR' },
              { value: '27', name: '红米' },
              { value: '26', name: '小米' },
              { value: '25', name: '美图' },
              { value: '24', name: 'ONEPLUS' },
              { value: '23', name: '魅族' },
              { value: '22', name: '红手指' },
              { value: '21', name: 'SAMSUNG' },
              { value: '20', name: '金立' },
              { value: '16', name: 'BLACKBERRY' },
              { value: '15', name: '诺基亚' },
              { value: '14', name: '锤子' },
              { value: '13', name: '大疆' },
              { value: '12', name: '361' },
              { value: '11', name: '摩托罗拉' },
              { value: '10', name: '联想' },
              { value: '9', name: '玩家国度' },
            ]
          }
        ]
      };
      myChart.setOption(option);
      // 点击某个字
      myChart.on('click', function (params) {
        console.log('myChart----click---:', params, '------', params.data)
      });

      // 需要在页面加载完毕后展示图表，这里使用Vue3的组合式生命周期钩子 onMounted()
      let myChart2 = echarts.init(document.getElementById("lefttop"));
      document.getElementById('lefttop').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart2.setOption({
        title: {
          text: '审批事项数统计图'
        },
        
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 250, 300, 123, 556],
            type: 'line'
          }
        ]
      });
      // window.onresize = function () { // 自适应大小
      //   myChart2.resize();
      // };
      let myChart3 = echarts.init(document.getElementById("leftfoot"));
      document.getElementById('leftfoot').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart3.setOption({
        title: {
          text: '各部门审批统计图'
        },
        //调整y轴文字的显示  
        grid: {
          top: 48,
          left: 80,// 调整这个属性
          right: 50,
          bottom: 50,

        },
        yAxis: {

          type: 'category',
          data: ['社保部门', '环保部门', '人事部门', '行政许可部门', '土地管理部门', '税务部门', '工商部门']
        },
        xAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 250, 300, 123, 556],
            type: 'bar'
          }
        ]
      });
      let myChart4 = echarts.init(document.getElementById("centerfoot"));
      document.getElementById('centerfoot').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart4.setOption({
        title: {
          text: '各部门审批统计图'
        },
        //调整y轴文字的显示  
        // grid:{
        //     top:48,
        //     left:80,// 调整这个属性
        //     right:50,
        //     bottom:50,

        // },
        xAxis: {

          type: 'category',
          data: ['社保部门', '环保部门', '人事部门', '行政许可部门', '土地管理部门', '税务部门', '工商部门']
        },
        yAxis: {
        },
        series: [
          {
            data: [120, 200, 150, 250, 300, 123, 556],
            type: 'bar',
            stack: 'x',
          },
          {
            data: [120, 200, 150, 250, 300, 123, 556],
            type: 'bar',
            stack: 'x',
          }
        ]
      });
      let myChart5 = echarts.init(document.getElementById("righttop1"));
      document.getElementById('righttop1').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart5.setOption({
        title: {
          text: '工作完成',
          left: 'center',
          top: 'center'
        },

        //调整y轴文字的显示  
        // grid:{
        //     top:48,
        //     left:80,// 调整这个属性
        //     right:50,
        //     bottom:50,

        // },

        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: 'A'
              },
              {
                value: 234,
                name: 'B'
              },
              {
                value: 1548,
                name: 'C'
              }
            ],
            radius: ['40%', '70%']
          }

        ]
      });
      let myChart6 = echarts.init(document.getElementById("righttop2"));
      document.getElementById('righttop2').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart6.setOption({
        title: {
          text: '按时办结',
          left: 'center',
          top: 'center'
        },

        //调整y轴文字的显示  
        // grid:{
        //     top:48,
        //     left:80,// 调整这个属性
        //     right:50,
        //     bottom:50,

        // },

        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: 'A'
              },
              {
                value: 234,
                name: 'B'
              },
              {
                value: 1548,
                name: 'C'
              }
            ],
            radius: ['40%', '70%']
          }

        ]
      });
      let myChart7 = echarts.init(document.getElementById("rightcenter"));
      document.getElementById('rightcenter').setAttribute('_echarts_instance_', '')
      // 设置图表配置项,可以直接从Echarts的示例中，将配置项复制下来后放入下列的myChart.setOption()中实现图表的样式更换
      myChart7.setOption({
        title: {
          text: '问题答复占比统计图',
          //       left: 'center',
          // top: 'center'
        },

        //调整y轴文字的显示  
        // grid:{
        //     top:48,
        //     left:80,// 调整这个属性
        //     right:50,
        //     bottom:50,

        // },

        series: [
          {
            type: 'pie',
            data: [
              {
                value: 335,
                name: 'A'
              },
              {
                value: 234,
                name: 'B'
              },
              {
                value: 1548,
                name: 'C'
              }
            ],
            //   radius: ['40%', '70%']
          }

        ]
      });
      

      window.onresize = function () { // 自适应大小
        myChart3.resize();
        myChart2.resize();
        myChart4.resize();
        myChart5.resize();
        myChart6.resize();
        myChart7.resize();
        myChart8.resize();

      };


      ////////////
    });
    return {


      data4

    }
  }

}
</script>

<style  scoped>
#left2 {
  width: 38%;
  height: 100%;
  /* border: 1px  solid red; */
}

#center2 {
  width: 33%;
  height: 100%;
  /* border: 1px  solid red; */
}

#right2 {
  width: 25%;
  height: 100%;
  /* border: 1px  solid red; */
}

#center {
  width: 95%;
  margin-left: 2%;
  /* height: 800px; */
  margin-top: 2%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
}

#left1 {
  display: flex;
  /* text-align: center; */
  margin-top: 2%;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;

}

#right1 {
  margin-top: 2%;
  border-radius: 8px;

}

#statics {
  width: 80%;
  height: 800px;
  background-color: white;
  /* border: 1px solid red ; */
}

#top {
  width: 95%;
  margin-left: 2%;
  display: flex;
  justify-content: space-between;
}</style>